import React, { useState, useEffect, useRef } from 'react';
import { Toast, Dialog, Input, Popup,TextArea  } from 'antd-mobile'
import HeadTop from '@/components/HeadTop';
import FootButton from '@/components/FootButton';
import UploadPhotos from '@/components/UploadPhotos';
import Loading from '@/components/Loading';
import Index from '@/api/equipment';
import "./index.less"

function Detail(props) {
    const [detaiObj, setDetaiObj] = useState({ itemVoList: [] });
    const [sureButtonTxt, setSureButtonTxt] = useState("开始设备维修")
    const [cancelReason, setCancelReason] = useState("");
    const [loading, setLoading] = useState(false);

    // 备件备品
    const uploadRef = useRef()
    const uploadRef2 = useRef()

    useEffect(() => {

        getInfoDetail()

    }, []);

    const getDicSelectData = () => {
        Promise.all([getDicInfo('FAULT_CATEGORY'), getDicInfo('WHETHER'), getDicInfo('PRODUCT_VALIDATION_STATUS')]).then(res => {
            console.log(res, 'res');
        })
    }

    // 字典
    const getDicInfo = (key) => {
        return new Promise((resolve, reject) => {
            Index.dictDetails({
                dictCode: key
            }).then(res => {
                if (res.data.code == 0) {
                    resolve(res.data.data.records)
                } else {
                    reject()
                }
            })
        })
    }

    const getInfoDetail = () => {
        setLoading(true)
        Index.devicedetail(props.location.state.no).then(res => {
            let result = res.data
            setLoading(false)
            if (result.code) {
                Toast.show({
                    content: '请求失败:' + result.msg,
                })
                return
            }
            setDetaiObj(result.data)
            // 故障图
            uploadRef.current && uploadRef.current.setPhotoListFinish(result.data?.photoUrl || [])
            if (result.data.status == 'TO_BE_REPAIRED' || result.data.status == 'ACCEPTED' || result.data.status == 'CANCEL_TO_BE_CONFIRMED') {

                setSureButtonTxt("确认取消维修")
            }
            if (result.data.status == 'REPAIRED_TO_BE_CONFIRMED') {
                setSureButtonTxt("确认完成维修")
                // 获取字典
                getDicSelectData()
                // 维修图
                uploadRef2.current && uploadRef2.current.setPhotoListFinish(result.data?.signOneUrl || [])
            }
        })
    }

    const getSubmitSure = () => {
        let txt = detaiObj.status == 'REPAIRED_TO_BE_CONFIRMED' ? '确定完成维修' : '确定取消维修'
        Dialog.confirm({
            content: txt,
            onConfirm: async () => {
                handleSubmit()
            },
        })
    }

    const handleSubmit = async () => {
        let params = {}
        let api = null
        setLoading(true)
        if (detaiObj.status == 'TO_BE_REPAIRED' || detaiObj.status == 'ACCEPTED') {
            api = Index.cancelRepair
            params = {
                no: detaiObj.no,
                cancelReason: cancelReason,
            }
        }
        if (detaiObj.status == 'CANCEL_TO_BE_CONFIRMED' || detaiObj.status == 'REPAIRED_TO_BE_CONFIRMED') {
            api = Index.repairConfirmed
            params = detaiObj.no
        }

        api(params).then(res => {
            setLoading(false)
            if (res.data.code) {
                Toast.show({
                    content: '请求失败:' + res.data.msg,
                })
                return
            }
            Toast.show({
                content: '提交成功',
            })
            getSubmitCancel()
        })
    }

    const getSubmitCancel = () => {
        props.history.goBack(-1)
    }

    return (
        <div className='page-wrapper detailPage equipmentDetail'>
            {
                loading ? <Loading></Loading> : null
            }
            <HeadTop title="设备维修" history={props.history}></HeadTop>
            <div className="page-body">
                <div className="info">
                    <div className="d-title">维修编号:{detaiObj.no}</div>
                    <div className="info-main">
                        <div className="m-line">
                            <div className="m-name">设备类型：</div>
                            <div className="m-val">{detaiObj.deviceType}</div>
                        </div>
                        <div className="m-line">
                            <div className="m-name">设备编号：</div>
                            <div className="m-val">{detaiObj.deviceCode}</div>
                        </div>
                        <div className="m-line">
                            <div className="m-name">设备名称：</div>
                            <div className="m-val">{detaiObj.deviceName}</div>
                        </div>
                        <div className="m-line">
                            <div className="m-name">维修人员：</div>
                            <div className="m-val">{detaiObj.name}</div>
                        </div>
                        <div className="m-line">
                            <div className="m-name">报修时间：</div>
                            <div className="m-val">{detaiObj.createTime}</div>
                        </div>
                        <div className="m-line">
                            <div className="m-name">标准维修时间/分钟</div>
                            <div className="m-val">{detaiObj.standardRepairTime}</div>
                        </div>
                    </div>
                </div>
                {
                    detaiObj.status == 'ACCEPTED' || detaiObj.status == 'TO_BE_REPAIRED' || detaiObj.status == 'CANCEL_TO_BE_CONFIRMED' ?
                        <div className="info">
                            <div className="d-title">任务取消原因</div>
                            <TextArea
                                placeholder='请输入任务取消原因'
                                disabled={detaiObj.status == 'CANCEL_TO_BE_CONFIRMED'}
                                value={cancelReason}
                                autoSize={{ minRows: 3, maxRows: 5 }}
                                onChange={val => {
                                    setCancelReason(val)
                                }}
                            />
                        </div> : null
                }
                <div className="info">
                    <div className="d-title">设备故障描述</div>
                    <div className="reason">
                        {detaiObj.badReason}
                    </div>
                </div>

                <div className="info">
                    <div className="d-title">故障图片</div>
                    <UploadPhotos
                        ref={uploadRef}
                        detaiObj={detaiObj}
                    />
                </div>

                {
                    detaiObj.status == "REPAIRED_TO_BE_CONFIRMED" ?
                        <>
                            <div className="info">
                                <div className="d-title">维修图片</div>
                                <UploadPhotos
                                    ref={uploadRef2}
                                    detaiObj={detaiObj}
                                    showUpload="REPAIRING" />
                            </div>
                            <div className="info">
                                <div className="d-title">故障类型</div>
                                <div className="d-info-val">
                                    {detaiObj.deviceType}
                                </div>
                            </div>
                            <div className="info">
                                <div className="d-title">设备故障原因</div>
                                <div className="reason">
                                    {detaiObj.repairContent}
                                </div>
                            </div>

                            <div className="info">
                                <div className="d-title">参数变更</div>
                                <div className="d-info-val">
                                    {detaiObj.paramChange}
                                </div>
                            </div>

                            <div className="info">
                                <div className="d-title">产品验证状态</div>
                                <div className="d-info-val">
                                    {detaiObj.productValidationStatus}
                                </div>
                            </div>

                            <div className="info">
                                <div className="d-title">临时措施</div>
                                <div className="d-info-val">
                                    {detaiObj.interimMeasures}
                                </div>
                            </div>
                            <div className="info">
                                <div className="d-title">永久措施</div>
                                <div className="d-info-val">
                                    {detaiObj.everlastingMeasures}
                                </div>

                            </div>
                            <div className="info">
                                <div className="d-title">备件备品领用</div>
                                <div className="d-info-val">
                                    {detaiObj.sparePartsNo}
                                </div>
                            </div>
                        </>
                        : null
                }

            </div>
            {
                detaiObj.status == 'REPAIRING' ? null :
                    <FootButton cancelTxt="返回"
                        sureTxt={sureButtonTxt}
                        getSubmitCancel={getSubmitCancel}
                        getSubmitSure={getSubmitSure}></FootButton>
            }

        </div>
    );
}

export default Detail;
